<template>
  <div class="foot-container">
    <div
      class="tab-row"
      v-for="(item, index) in footer"
      :key="item.text"
      @click="tabItemOnClick(item, index)"
    >
      <div
        v-bind:class="
          activeIndex === index ? 'active-class' : 'flex-bottomItem'
        "
      >
        <span>{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import RouterConfig from "../config/RouterConfig";
export default {
  name: "TabBar",
  props: {
    tabIndex: Number,
  },
  data: function () {
    return {
      activeIndex: 0,
      footer: [
        { text: "首页", path: RouterConfig.Home.path },
        { text: "充值", path: RouterConfig.Recharge.path },
        { text: "学习", path: RouterConfig.Study.path },
        { text: "购彩", path: RouterConfig.Buylottery.path },
        { text: "我的", path: RouterConfig.User.path },
      ],
    };
  },
  //
  created: function () {
    console.log("tabIndex", this.tabIndex);
    this.activeIndex = this.tabIndex;
  },
  methods: {
    tabItemOnClick: function (item, index) {
      this.activeIndex = index;
      console.log("this.activeIndex", this.activeIndex);
      let path = item.path;
      let query = {};
      this.gotoPage(path, query);
    },
    gotoPage: function (path, query) {
      this.$router.replace({
        path: path,
        query: query,
      });
    },
  },
};
</script>
<style scoped>
.foot-container {
  display: flex;
  flex-direction: row;
  height: 3rem;
  background-color: blueviolet;
  justify-content: center;
  align-items: center;
}
.tab-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 3rem;
  justify-content: center;
  align-items: center;
}
.flex-bottomItem {
  flex: 1;
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: solid 0.5px;
}
.active-class {
  flex: 1;
  height: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: solid 0.5px;
  background-color: blue;
}
</style>
